<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>周末昌平</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/pop.css">
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
</head>
<body>


<div class="main mainPage1" style="z-index: 10">
  <img class="page_img" src="images/page1.png">
</div>
<div class="main mainPage2">
  <img class="page_img" src="images/page1-2.png">
</div>
<div class="main mainPage3">
  <img class="page_img" src="images/page2.png">
</div>
<div class="main mainPage4">
  <img class="page_img" src="images/page3.png">
</div>
<div class="main mainPage5">
  <img class="page_img" src="images/page4.png">
</div>
<div class="main mainPC" style="display: block">
  <img class="main_bg" src="images/bg.gif">
  <header>
    <img class="head_img" src="./images/head_img.png">
    <div class="head_back flex_c">
      <img src="images/icon_back.png">
      <div class="lineS"></div>
      <span>返回目录</span>
    </div>
  </header>
  <aside class="left_part">
    <!--交易情况-->
    <div class="unit_pt up_part">
      <div class="tit_box flex_c">
        <div class="tit">
          <p class="txt colB">交易情况</p>
          <p class="shadow">交易情况</p>
        </div>
      </div>
      <div class="content">
        <div class="total_num  flex_sb_c">
          <p class="name fs18">交易总额：</p>
          <p class="money fs12 flex_c">
            <span class="fontF fs24">188.739</span>
            <label>万元</label>
          </p>
        </div>
        <div class="count_box flex_sb">
          <div class="count flex_c">
            <img src="images/img1.png">
            <div>
              <div class="tit fs14 flex_c">
                <p class="txt colB2">小程序交易额</p>
                <p class="shadow2">小程序交易额</p>
              </div>
              <div class="number">
                <p>
                  <span class="shadow2 fs18">2.45</span>
                  <label class="fs12">万</label>
                </p>
              </div>
              <p></p>
            </div>
          </div>
          <div class="count flex_c">
            <img src="images/img1.png">
            <div>
              <div class="tit fs14 flex_c">
                <p class="txt colB2">辛庄市集交易额</p>
                <p class="shadow2">辛庄市集交易额</p>
              </div>
              <div class="number">
                <p>
                  <span class="shadow2 fs18">186.29</span>
                  <label class="fs12">万</label>
                </p>
              </div>
              <p></p>
            </div>
          </div>
        </div>
        <!-- 2. 创建图表容器（ECharts会将图表渲染到这个DOM元素中） -->
        <div id="chart"></div>
        <div class="chart_label fs12 flex_c">
          <div class="flex_c">
            <label></label>
            <span>小程序</span>
          </div>
          <div class="flex_c">
            <label class="blue"></label>
            <span>辛庄市集</span>
          </div>
        </div>
      </div>
    </div>
    <!--活动情况-->
    <div class="unit_pt down_part">
      <div class="tit_box flex_c">
        <div class="tit">
          <p class="txt colB">活动情况</p>
          <p class="shadow">活动情况</p>
        </div>
      </div>
      <div class="content">
        <div class="total_num  flex_sb_c">
          <p class="name fs18">活动总数：</p>
          <p class="money fs12 flex_c">
            <span class="fontF fs24">1185</span>
            <label>场</label>
          </p>
        </div>
        <div class="count_box flex_sb">
          <div class="count flex_c">
            <img src="images/img2.png">
            <div>
              <div class="tit fs14 flex_c">
                <p class="txt colB3">覆盖镇街</p>
                <p class="shadow2">覆盖镇街</p>
              </div>
              <div class="number">
                <p>
                  <span class="shadow2 fs16">15</span>
                  <label class="fs12">个</label>
                </p>
              </div>
            </div>
          </div>
          <div class="count flex_c">
            <img src="images/img4.png">
            <div>
              <div class="tit fs14 flex_c">
                <p class="txt colB3">覆盖人数</p>
                <p class="shadow2">覆盖人数</p>
              </div>
              <div class="number">
                <p>
                  <span class="shadow2 fs16">12000</span>
                  <label class="fs12">人</label>
                </p>
              </div>
            </div>
          </div>
          <div class="count flex_c">
            <img src="images/img3.png">
            <div>
              <div class="tit fs14 flex_c">
                <p class="txt colB3">覆盖人次</p>
                <p class="shadow2">覆盖人次</p>
              </div>
              <div class="number">
                <p>
                  <span class="shadow2 fs16">186100</span>
                  <label class="fs12">次</label>
                </p>
              </div>
              <p></p>
            </div>
          </div>
        </div>
        <div class="pie_number flex_sb">
          <div class="pie_box">
            <img class="img" src="images/img5.png">
            <div id="pieChart"></div>
          </div>
          <div class="swiper mySwiper">
            <div class="swiper-wrapper fs12">
              <div class="swiper-slide">
                <div class="one flex_sb_c">
                  <span class="col1">便民服务</span>
                  <p>194 场 / 4136 人次</p>
                </div>
                <div class="one flex_sb_c">
                  <span class="col2">采摘</span>
                  <p>4 场 / 33 人次</p>
                </div>
                <div class="one flex_sb_c">
                  <span class="col3">创客</span>
                  <p>20 场 / 354 人次</p>
                </div>
                <div class="one flex_sb_c">
                  <span class="col4">露营体验</span>
                  <p>1 场 / 4 人次</p>
                </div>
                <div class="one flex_sb_c">
                  <span class="col5">其他活动</span>
                  <p>80 场 / 149888 人次</p>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="one flex_sb_c">
                  <span class="col6">骑行</span>
                  <p>47 场 / 2719 人次</p>
                </div>
                <div class="one flex_sb_c">
                  <span class="col7">亲子</span>
                  <p>340 场 / 8200 人次</p>
                </div>
                <div class="one flex_sb_c">
                  <span class="col8">全民健身</span>
                  <p>44 场 / 1073 人次</p>
                </div>
                <div class="one flex_sb_c">
                  <span class="col9">市集</span>
                  <p>13 场 / 309 人次</p>
                </div>
                <div class="one flex_sb_c">
                  <span class="col10">体育培训</span>
                  <p>33 场 / 627 人次</p>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="one flex_sb_c">
                  <span class="col11">体育赛事</span>
                  <p>1 场 / 5341 人次</p>
                </div>
                <div class="one flex_sb_c">
                  <span class="col12">文化艺术</span>
                  <p>368 场 / 11093 人次</p>
                </div>
                <div class="one flex_sb_c">
                  <span class="col13">研学</span>
                  <p>21 场 / 1384 人次</p>
                </div>
                <div class="one flex_sb_c">
                  <span class="col14">运动赛事</span>
                  <p>19 场 / 939 人次</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </aside>
  <!-- 中间部分 -->
  <aside class="center_part">
    <div class="head_ct flex">
      <div class="type flex_c">
        <img src="images/icon1.png">
        <span>活动</span>
      </div>
      <div class="type flex_c">
        <img src="images/icon2.png">
        <span>活动</span>
      </div>
    </div>
    <div class="map_box">
      <img class="map_img" src="images/map.png">
      <!--地图点-->
      <div class="point point_xx point1">
        <img src="images/icon4_1.png">
      </div>
      <div class="point point_xx point2">
        <img src="images/icon4_1.png">
      </div>
      <div class="point point_xx point3">
        <img src="images/icon4_1.png">
      </div>
      <div class="point point_xx point4">
        <img src="images/icon4_1.png">
      </div>
      <img class="point point_y point5" src="images/icon1.png">
      <img class="point point_y point6" src="images/icon1.png">
      <img class="point point_y point7" src="images/icon1.png">
      <img class="point point_y point8" src="images/icon1.png">
      <img class="point point_y point9" src="images/icon1.png">
      <div class="point point_hd point10">
        <img src="images/img_guang2.png">
        <div class="light"></div>
        <div class="bubble bubble1">
          <span>天北会客厅</span>
        </div>
      </div>
      <div class="point point_hd point11">
        <img src="images/img_guang2.png">
        <div class="light"></div>
        <div class="bubble bubble2">
          <span>天通苑文化艺术中心</span>
        </div>
      </div>
      <div class="point point_hd point12">
        <img src="images/img_guang2.png">
        <div class="light"></div>
        <div class="bubble bubble1">
          <span>辛庄市集</span>
        </div>
      </div>
      <div class="point point_hd point13">
        <img src="images/img_guang1.png">
        <div class="light"></div>
        <div class="bubble bubble3">
          <span>辛庄村</span>
        </div>
      </div>
      <img class="point point14" src="images/icon5.png">
    </div>
    <!-- 两个项目 -->
    <div class="pro_product flex_sb">
      <div class="product">
        <div class="tit_box flex_c">
          <div class="tit">
            <p class="txt colB">重点项目</p>
            <p class="shadow">重点项目</p>
          </div>
        </div>
        <div class="swiper zdSwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="title2 flex_ac">
                <img class="arrow" src="images/icon3.png">
                <div class="tit fs16">
                  <p class="txt colB">辛庄市集项目</p>
                  <p class="shadow">辛庄市集项目</p>
                </div>
                <div class="english shadow2 fs12">MAJOR PROJECT</div>
              </div>
              <div class="flex_sb">
                <img class="img" src="images/img11.png">
                <div class="word fs14">
                  <p>自2025年5月1日运营以来，累计客流量36万余人次，注册商户数416家，交易金额181余万元，交易单数31642单。</p>
                  <p>累计举办活动50余场，涉及运动、演唱、亲子等主题；</p>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="title2 flex_ac">
                <img class="arrow" src="images/icon3.png">
                <div class="tit fs16">
                  <p class="txt colB">天通苑文化艺术中心</p>
                  <p class="shadow">天通苑文化艺术中心</p>
                </div>
                <div class="english shadow2 fs12">MAJOR PROJECT</div>
              </div>
              <div class="flex_sb">
                <img class="img" src="images/img12.png">
                <div class="word fs14">
                  <p>自2021年7月运营以来，累计街道居民431万+人次，累计服务借还书31万本，累计开展活动11127场次，提供咨询服务8.1万分钟，培育孵化志愿者4097名。</p>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="title2 flex_ac">
                <img class="arrow" src="images/icon3.png">
                <div class="tit fs16">
                  <p class="txt colB">天北街道综合文化中心</p>
                  <p class="shadow">天北街道综合文化中心</p>
                </div>
                <div class="english shadow2 fs12">MAJOR PROJECT</div>
              </div>
              <div class="flex_sb">
                <img class="img" src="images/img13.png">
                <div class="word fs14">
                  <p>自2025年5月1日运营以来，累计客流量36万余人次，注册商户数416家，交易金额181余万元，交易单数31642单。</p>
                  <p>累计举办活动50余场，涉及运动、演唱、亲子等主题；</p>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <div class="product">
        <div class="tit_box flex_c">
          <div class="tit">
            <p class="txt colB">亮点品牌</p>
            <p class="shadow">亮点品牌</p>
          </div>
        </div>
        <div class="swiper ldSwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="title2 flex_ac">
                <img class="arrow" src="images/icon3.png">
                <div class="tit fs16">
                  <p class="txt colB">落日音乐会</p>
                  <p class="shadow">落日音乐会</p>
                </div>
                <div class="english shadow2 fs12">Highlight Brands</div>
              </div>
              <div class="flex_sb">
                <img class="img" src="images/img14.png">
                <div class="word fs14">
                  <p>截至目前共举办25场落日音乐会，邀请了30支乐队进行演出，网络平台曝光430万人次，覆盖了近36万人次，为辛庄市集提高近30%的交易额。</p>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="title2 flex_ac">
                <img class="arrow" src="images/icon3.png">
                <div class="tit fs16">
                  <p class="txt colB">天北街头音乐会-"海魂衫之夜"</p>
                  <p class="shadow">天北街头音乐会-"海魂衫之夜"</p>
                </div>
                <div class="english shadow2 fs12">Highlight Brands</div>
              </div>
              <div class="flex_sb">
                <img class="img" src="images/img15.png">
                <div class="word fs14">
                  <p>获人民网、北京电视台、北京日报等7家重量级媒体现场报道，并得到央广网、北京青年报、新京报、北京昌平、昌平报等共计 11家 主流媒体报道。</p>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="title2 flex_ac">
                <img class="arrow" src="images/icon3.png">
                <div class="tit fs16">
                  <p class="txt colB">彩虹骑跑活动</p>
                  <p class="shadow">彩虹骑跑活动</p>
                </div>
                <div class="english shadow2 fs12">Highlight Brands</div>
              </div>
              <div class="flex_sb">
                <img class="img" src="images/img16.png">
                <div class="word fs14">
                  <p>“骑跑昌平·辛庄逐风遇彩虹”活动9月20日举办。活动融合生态、艺术、运动等要素，以“骑行+彩虹跑”方式举行，共吸引200余人参加。</p>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
    <!--新庄村弹窗-->
    <div class="pop_c pop1 fs12">
      <div class="tit_box2 flex_sb_c">
        <div class="tit">
          <p class="txt colB">辛庄村</p>
          <p class="shadow">辛庄村</p>
        </div>
        <div class="close"></div>
      </div>
      <div class="row flex_sb_c">
        <div class="left flex_sb_c">
          <span>东市市集</span>
          <span>29场</span>
        </div>
        <div class="right flex_sb_c">
          <span>客流</span>
          <span>30000人次</span>
        </div>
      </div>
      <div class="row flex_sb_c">
        <div class="left flex_sb_c">
          <span>落日音乐会</span>
          <span>29场</span>
        </div>
        <div class="right flex_sb_c">
          <span>覆盖</span>
          <span>30000人次</span>
        </div>
      </div>
      <div class="row flex_sb_c">
        <div class="left flex_sb_c">
          <span>活动</span>
          <span>29场</span>
        </div>
        <div class="right flex_sb_c">
          <span>覆盖</span>
          <span>30000人次</span>
        </div>
      </div>
      <div class="row wid flex_sb_c">
        <span>青绿联盟成员</span>
        <span>40人</span>
      </div>
    </div>
  </aside>
  <!-- 右侧部分 -->
  <aside class="right_part">
    <img class="bg" src="images/bg_right2.png">
    <!--小程序-->
    <div class="product_rt product_wechat flex_sb_c">
      <div class="message">
        <div class="lf_msg">
          <div class="tit fs12">
            <p class="txt colB3">注册用户数</p>
            <p class="shadow2">注册用户数</p>
          </div>
          <div class="number2 shadow2 fs14">7908</div>
        </div>
        <div class="lf_msg">
          <div class="tit fs12">
            <p class="txt colB3">累计交易额</p>
            <p class="shadow2">累计交易额</p>
          </div>
          <div class="number2">
            <span class="shadow2 fs14">2.45</span>
            <label class="fs10">万</label>
          </div>
        </div>
      </div>
      <img class="img" src="images/icon21.png">
    </div>
    <!--微信视频号-->
    <div class="product_rt product_sph flex_sb_c">
      <div class="message">
        <div class="lf_msg">
          <div class="tit fs12">
            <p class="txt colB3">累计粉丝数</p>
            <p class="shadow2">累计粉丝数</p>
          </div>
          <div class="number2 shadow2 fs14">2682</div>
        </div>
        <div class="lf_msg">
          <div class="tit fs12">
            <p class="txt colB3">视频播放量</p>
            <p class="shadow2">视频播放量</p>
          </div>
          <div class="number2 shadow2 fs14">672644</div>
        </div>
      </div>
      <img class="img" src="images/icon22.png">
    </div>
    <!--抖音-->
    <div class="product_rt product_dy flex_sb_c">
      <div class="message">
        <div class="lf_msg">
          <div class="tit fs12">
            <p class="txt colB3">累计粉丝数</p>
            <p class="shadow2">累计粉丝数</p>
          </div>
          <div class="number2 shadow2 fs14">547</div>
        </div>
        <div class="lf_msg">
          <div class="tit fs12">
            <p class="txt colB3">视频播放量</p>
            <p class="shadow2">视频播放量</p>
          </div>
          <div class="number2 shadow2 fs14">224026</div>
        </div>
      </div>
      <img class="img" src="images/icon23.png">
    </div>
    <!--公众号-->
    <div class="product_rt product_gzh flex_sb_c">
      <div class="message">
        <div class="lf_msg">
          <div class="tit fs12">
            <p class="txt colB3">累计粉丝数</p>
            <p class="shadow2">累计粉丝数</p>
          </div>
          <div class="number2 shadow2 fs14">2937</div>
        </div>
        <div class="lf_msg">
          <div class="tit fs12">
            <p class="txt colB3">阅读总量</p>
            <p class="shadow2">阅读总量</p>
          </div>
          <div class="number2 shadow2 fs14">85040</div>
        </div>
      </div>
      <img class="img" src="images/icon24.png">
    </div>
    <!--小红书-->
    <div class="product_rt product_xhs flex_sb_c">
      <div class="message">
        <div class="lf_msg">
          <div class="tit fs12">
            <p class="txt colB3">累计粉丝数</p>
            <p class="shadow2">累计粉丝数</p>
          </div>
          <div class="number2 shadow2 fs14">688</div>
        </div>
        <div class="lf_msg">
          <div class="tit fs12">
            <p class="txt colB3">笔记阅读总量</p>
            <p class="shadow2">笔记阅读总量</p>
          </div>
          <div class="number2 shadow2 fs14">59831</div>
        </div>
      </div>
      <img class="img" src="images/icon25.png">
    </div>
  </aside>
  <div id="nextPage" style="position: absolute; top: 4rem; right: 4rem; cursor: pointer; z-index: 100">下一页</div>
  <!--5大弹窗-->
  <div class="pop_box">
    <!-- 小程序 -->
    <div class="popD pop_xcx">
      <div class="head flex_sb">
        <div class="tit fs24">
          <p class="txt colB">小程序详细分析</p>
          <p class="shadow">小程序详细分析</p>
        </div>
        <img class="close" src="images/c_pop_close.png">
      </div>
      <div class="content">
        <div class="introduce flex_sb_c">
          <img class="logo" src="images/c_pop_logo.png">
          <div class="word fs16">
            <p>2025年5月起运营“周末昌平”小程序（含7月、8月辛庄市集休市期），截止目前用户总数<span>7908</span>人，累计交易额<span>2.45</span>万元，累计交易笔数<span>591</span>笔，累计交易人数<span>467</span>人，共开展线上活动<span>1185</span>场。</p>
          </div>
        </div>
        <!--小程序用户分析-->
        <div class="tit5 flex_sb_c">
          <div class="tit fs16">
            <p class="txt colB">小程序用户分析</p>
            <p class="shadow">小程序用户分析</p>
          </div>
        </div>
        <div class="part1 flex_sb">
          <div class="pop_chart1">
            <div class="tit6 flex_ac">
              <div class="tit fs14">
                <p class="txt colB">用户性别分 析</p>
                <p class="shadow">用户性别分析</p>
              </div>
            </div>
            <div class="chart_kk">
              <div id="popChart1"></div>
              <div class="circle"></div>
              <p class="txt fs12">用户<br/>性别</p>
            </div>
          </div>
          <div class="pop_chart2">
            <div class="tit6 flex_ac">
              <div class="tit fs14">
                <p class="txt colB">平台用户趋势</p>
                <p class="shadow">平台用户趋势</p>
              </div>
            </div>
            <div id="popChart2"></div>
          </div>
          <div class="pop_chart3">
            <div class="tit6 flex_ac">
              <div class="tit fs14">
                <p class="txt colB">访问用户年龄趋势</p>
                <p class="shadow">访问用户年龄趋势</p>
              </div>
            </div>
            <div id="popChart3"></div>
          </div>
        </div>
        <div class="part1 flex_sb">
          <div class="pop_chart4 pr">
            <div class="tit6 flex_ac">
              <div class="tit fs16">
                <p class="txt colB">交易金额趋势</p>
                <p class="shadow">交易金额趋势</p>
              </div>
            </div>
            <div id="popChart4"></div>
          </div>
          <div class="pop_chart4 pr">
            <div class="tit6 flex_ac">
              <div class="tit fs16">
                <p class="txt colB">交易笔数 / 人数趋势</p>
                <p class="shadow">交易笔数 / 人数趋势</p>
              </div>
            </div>
            <div id="popChart5"></div>
            <!--图例-->
            <!--<div class="tu_li flex">
              <p class="flex_sb_c fs12">
                <label class="bg_col1"></label>
                <span>交易笔数</span>
              </p>
              <p class="flex_sb_c fs12">
                <label class="bg_col2"></label>
                <span>人数趋势</span>
              </p>
            </div>-->
          </div>
        </div>
      </div>
    </div>
    <!-- 视频号 -->
    <div class="popD pop_sph">
      <div class="head flex_sb">
        <div class="tit fs24">
          <p class="txt colB">视频号详细分析</p>
          <p class="shadow">视频号详细分析</p>
        </div>
        <img class="close" src="images/c_pop_close.png">
      </div>
      <div class="content">
        <!--精彩时刻-->
        <div class="moment">
          <div class="tit3 flex_ac">
            <div class="tit fs20">
              <p class="txt colB">精彩时刻</p>
              <p class="shadow">精彩时刻</p>
            </div>
            <div class="english shadow2 fs12">The moment of glory</div>
          </div>
          <div class="active flex_sb_c">
            <img class="event_img" src="images/c_pop_img2.png">
            <div class="message">
              <div class="type_box flex_ac">
                <div class="type flex_sb_c">
                  <img class="icon" src="images/c_pop_i1.png">
                  <div class="right">
                    <p class="fs12">播放总量</p>
                    <p>
                      <b class="fs20">672644</b>
                      <label class="fs12">次</label>
                    </p>
                  </div>
                </div>
                <div class="type flex_sb_c">
                  <img class="icon" src="images/c_pop_i4.png">
                  <div class="right">
                    <p class="fs12">粉丝总数</p>
                    <p>
                      <b class="fs20">2682</b>
                      <label class="fs12">人</label>
                    </p>
                  </div>
                </div>
                <div class="type flex_sb_c">
                  <img class="icon" src="images/c_pop_i5.png">
                  <div class="right">
                    <p class="fs12">点赞总数</p>
                    <p>
                      <b class="fs20">2517</b>
                      <label class="fs12">个</label>
                    </p>
                  </div>
                </div>
                <div class="type flex_sb_c">
                  <img class="icon" src="images/c_pop_i5.png">
                  <div class="right">
                    <p class="fs12">转发总数</p>
                    <p>
                      <b class="fs20">10943</b>
                      <label class="fs12">次</label>
                    </p>
                  </div>
                </div>
              </div>
              <div class="word fs16">
                <p>2025年5月起运营“周末昌平”视频号（含7月、8月辛庄市集休市期），截止目前粉丝总数<span>2682</span>，发布视频总数<span>25</span>条，视频播放总量<span>672644</span>次，点赞总数<span>2517</span>次，评论总数<span>566</span>次，转发总数<span>10943</span>次。</p>
              </div>
            </div>
          </div>
        </div>
        <!--3个图表-->
        <div class="charts_box flex_sb">
          <div class="tu_biao">
            <div class="tit4 flex_ac">
              <div class="tit fs16">
                <p class="txt colB">新增粉丝趋势分析</p>
                <p class="shadow">新增粉丝趋势分析</p>
              </div>
            </div>
            <div id="popChart6"></div>
          </div>
          <div class="tu_biao">
            <div class="tit4 flex_ac">
              <div class="tit fs16">
                <p class="txt colB">视频发布与观看热度分析</p>
                <p class="shadow">视频发布与观看热度分析</p>
              </div>
            </div>
            <div id="popChart7"></div>
          </div>
          <div class="tu_biao">
            <div class="tit4 flex_ac">
              <div class="tit fs16">
                <p class="txt colB">用户互动效果趋势分析</p>
                <p class="shadow">用户互动效果趋势分析</p>
              </div>
            </div>
            <div id="popChart8"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 抖音 -->
    <div class="popD pop_dy">
      <div class="head flex_sb">
        <div class="tit fs24">
          <p class="txt colB">抖音详细分析</p>
          <p class="shadow">抖音详细分析</p>
        </div>
        <img class="close" src="images/c_pop_close.png">
      </div>
      <div class="content">
        <!--精彩时刻-->
        <div class="moment">
          <div class="tit3 flex_ac">
            <div class="tit fs20">
              <p class="txt colB">精彩时刻</p>
              <p class="shadow">精彩时刻</p>
            </div>
            <div class="english shadow2 fs12">The moment of glory</div>
          </div>
          <div class="active flex_sb_c">
            <img class="event_img" src="images/c_pop_img2.png">
            <div class="message">
              <div class="type_box flex_ac">
                <div class="type flex_sb_c">
                  <img class="icon" src="images/c_pop_i1.png">
                  <div class="right">
                    <p class="fs12">播放总量</p>
                    <p>
                      <b class="fs20">672644</b>
                      <label class="fs12">次</label>
                    </p>
                  </div>
                </div>
                <div class="type flex_sb_c">
                  <img class="icon" src="images/c_pop_i4.png">
                  <div class="right">
                    <p class="fs12">粉丝总数</p>
                    <p>
                      <b class="fs20">2682</b>
                      <label class="fs12">人</label>
                    </p>
                  </div>
                </div>
                <div class="type flex_sb_c">
                  <img class="icon" src="images/c_pop_i5.png">
                  <div class="right">
                    <p class="fs12">点赞总数</p>
                    <p>
                      <b class="fs20">2517</b>
                      <label class="fs12">个</label>
                    </p>
                  </div>
                </div>
                <div class="type flex_sb_c">
                  <img class="icon" src="images/c_pop_i5.png">
                  <div class="right">
                    <p class="fs12">转发总数</p>
                    <p>
                      <b class="fs20">10943</b>
                      <label class="fs12">次</label>
                    </p>
                  </div>
                </div>
              </div>
              <div class="word fs16">
                <p>2025年5月起运营“周末昌平”视频号（含7月、8月辛庄市集休市期），截止目前粉丝总数<span>2682</span>，发布视频总数<span>25</span>条，视频播放总量<span>672644</span>次，点赞总数<span>2517</span>次，评论总数<span>566</span>次，转发总数<span>10943</span>次。</p>
              </div>
            </div>
          </div>
        </div>
        <!--3个图表-->
        <div class="charts_box flex_sb">
          <div class="tu_biao">
            <div class="tit4 flex_ac">
              <div class="tit fs16">
                <p class="txt colB">新增粉丝趋势分析</p>
                <p class="shadow">新增粉丝趋势分析</p>
              </div>
            </div>
            <div id="popChart9"></div>
          </div>
          <div class="tu_biao">
            <div class="tit4 flex_ac">
              <div class="tit fs16">
                <p class="txt colB">视频发布与观看热度分析</p>
                <p class="shadow">视频发布与观看热度分析</p>
              </div>
            </div>
            <div id="popChart10"></div>
          </div>
          <div class="tu_biao">
            <div class="tit4 flex_ac">
              <div class="tit fs16">
                <p class="txt colB">用户互动效果趋势分析</p>
                <p class="shadow">用户互动效果趋势分析</p>
              </div>
            </div>
            <div id="popChart11"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 公众号 -->
    <div class="popD pop_gzh">
      <div class="head flex_sb">
        <div class="tit fs24">
          <p class="txt colB">抖音详细分析</p>
          <p class="shadow">抖音详细分析</p>
        </div>
        <img class="close" src="images/c_pop_close.png">
      </div>
      <div class="content">
        <!--精彩时刻-->
        <div class="moment">
          <div class="tit3 flex_ac">
            <div class="tit fs20">
              <p class="txt colB">精彩时刻</p>
              <p class="shadow">精彩时刻</p>
            </div>
            <div class="english shadow2 fs12">The moment of glory</div>
          </div>
          <div class="active flex_sb_c">
            <img class="event_img" src="images/c_pop_img2.png">
            <div class="message">
              <div class="type_box flex_ac">
                <div class="type flex_sb_c">
                  <img class="icon" src="images/c_pop_i1.png">
                  <div class="right">
                    <p class="fs12">播放总量</p>
                    <p>
                      <b class="fs20">672644</b>
                      <label class="fs12">次</label>
                    </p>
                  </div>
                </div>
                <div class="type flex_sb_c">
                  <img class="icon" src="images/c_pop_i4.png">
                  <div class="right">
                    <p class="fs12">粉丝总数</p>
                    <p>
                      <b class="fs20">2682</b>
                      <label class="fs12">人</label>
                    </p>
                  </div>
                </div>
                <div class="type flex_sb_c">
                  <img class="icon" src="images/c_pop_i5.png">
                  <div class="right">
                    <p class="fs12">点赞总数</p>
                    <p>
                      <b class="fs20">2517</b>
                      <label class="fs12">个</label>
                    </p>
                  </div>
                </div>
                <div class="type flex_sb_c">
                  <img class="icon" src="images/c_pop_i5.png">
                  <div class="right">
                    <p class="fs12">转发总数</p>
                    <p>
                      <b class="fs20">10943</b>
                      <label class="fs12">次</label>
                    </p>
                  </div>
                </div>
              </div>
              <div class="word fs16">
                <p>2025年5月起运营“周末昌平”视频号（含7月、8月辛庄市集休市期），截止目前粉丝总数<span>2682</span>，发布视频总数<span>25</span>条，视频播放总量<span>672644</span>次，点赞总数<span>2517</span>次，评论总数<span>566</span>次，转发总数<span>10943</span>次。</p>
              </div>
            </div>
          </div>
        </div>
        <!--3个图表-->
        <div class="charts_box flex_sb">
          <div class="tu_biao">
            <div class="tit4 flex_ac">
              <div class="tit fs16">
                <p class="txt colB">新增粉丝趋势分析</p>
                <p class="shadow">新增粉丝趋势分析</p>
              </div>
            </div>
            <div id="popChart12"></div>
          </div>
          <div class="tu_biao">
            <div class="tit4 flex_ac">
              <div class="tit fs16">
                <p class="txt colB">视频发布与观看热度分析</p>
                <p class="shadow">视频发布与观看热度分析</p>
              </div>
            </div>
            <div id="popChart13"></div>
          </div>
          <div class="tu_biao">
            <div class="tit4 flex_ac">
              <div class="tit fs16">
                <p class="txt colB">用户互动效果趋势分析</p>
                <p class="shadow">用户互动效果趋势分析</p>
              </div>
            </div>
            <div id="popChart814"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 小红书 -->
    <div class="popD pop_xhs">
      <div class="head flex_sb">
        <div class="tit fs24">
          <p class="txt colB">抖音详细分析</p>
          <p class="shadow">抖音详细分析</p>
        </div>
        <img class="close" src="images/c_pop_close.png">
      </div>
      <div class="content">
        <!--精彩时刻-->
        <div class="moment">
          <div class="tit3 flex_ac">
            <div class="tit fs20">
              <p class="txt colB">精彩时刻</p>
              <p class="shadow">精彩时刻</p>
            </div>
            <div class="english shadow2 fs12">The moment of glory</div>
          </div>
          <div class="active flex_sb_c">
            <img class="event_img" src="images/c_pop_img2.png">
            <div class="message">
              <div class="type_box flex_ac">
                <div class="type flex_sb_c">
                  <img class="icon" src="images/c_pop_i1.png">
                  <div class="right">
                    <p class="fs12">播放总量</p>
                    <p>
                      <b class="fs20">672644</b>
                      <label class="fs12">次</label>
                    </p>
                  </div>
                </div>
                <div class="type flex_sb_c">
                  <img class="icon" src="images/c_pop_i4.png">
                  <div class="right">
                    <p class="fs12">粉丝总数</p>
                    <p>
                      <b class="fs20">2682</b>
                      <label class="fs12">人</label>
                    </p>
                  </div>
                </div>
                <div class="type flex_sb_c">
                  <img class="icon" src="images/c_pop_i5.png">
                  <div class="right">
                    <p class="fs12">点赞总数</p>
                    <p>
                      <b class="fs20">2517</b>
                      <label class="fs12">个</label>
                    </p>
                  </div>
                </div>
                <div class="type flex_sb_c">
                  <img class="icon" src="images/c_pop_i5.png">
                  <div class="right">
                    <p class="fs12">转发总数</p>
                    <p>
                      <b class="fs20">10943</b>
                      <label class="fs12">次</label>
                    </p>
                  </div>
                </div>
              </div>
              <div class="word fs16">
                <p>2025年5月起运营“周末昌平”视频号（含7月、8月辛庄市集休市期），截止目前粉丝总数<span>2682</span>，发布视频总数<span>25</span>条，视频播放总量<span>672644</span>次，点赞总数<span>2517</span>次，评论总数<span>566</span>次，转发总数<span>10943</span>次。</p>
              </div>
            </div>
          </div>
        </div>
        <!--3个图表-->
        <div class="charts_box flex_sb">
          <div class="tu_biao">
            <div class="tit4 flex_ac">
              <div class="tit fs16">
                <p class="txt colB">新增粉丝趋势分析</p>
                <p class="shadow">新增粉丝趋势分析</p>
              </div>
            </div>
            <div id="popChart15"></div>
          </div>
          <div class="tu_biao">
            <div class="tit4 flex_ac">
              <div class="tit fs16">
                <p class="txt colB">视频发布与观看热度分析</p>
                <p class="shadow">视频发布与观看热度分析</p>
              </div>
            </div>
            <div id="popChart16"></div>
          </div>
          <div class="tu_biao">
            <div class="tit4 flex_ac">
              <div class="tit fs16">
                <p class="txt colB">用户互动效果趋势分析</p>
                <p class="shadow">用户互动效果趋势分析</p>
              </div>
            </div>
            <div id="popChart817"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="main mainPage6">
  <img class="page_img" src="images/page5.png">
</div>
<div class="main mainPage7">
  <img class="page_img" src="images/page6.png">
</div>
<div class="main mainPage8">
  <img class="page_img" src="images/page7.png">
</div>
<div class="main mainPage9">
  <img class="page_img" src="images/page8.png">
</div>
<div class="main mainPage10">
  <img class="page_img" src="images/page9.png">
</div>
<div class="main mainPage11">
  <img class="page_img" src="images/page10.png">
</div>



<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/swiper-bundle.min.js"></script>
<script src="js/myCharts.js"></script>
<script>
  $('.mainPage1').on('click', function() {
    $(this).addClass('.main_box').siblings().removeClass('.main_box');
    $('.mainPage2').css({zIndex: 10})
  })
  $('.mainPage2').on('click', function() {
    $(this).addClass('.main_box').siblings().removeClass('.main_box');
    $('.mainPage3').css({zIndex: 10})
  })
  $('.mainPage3').on('click', function() {
    $(this).addClass('.main_box').siblings().removeClass('.main_box');
    $('.mainPage4').css({zIndex: 10})
  })
  $('.mainPage4').on('click', function() {
    $(this).addClass('.main_box').siblings().removeClass('.main_box');
    $('.mainPage5').css({zIndex: 10})
  })
  $('.mainPage5').on('click', function() {
    $(this).addClass('.main_box').siblings().removeClass('.main_box');
    $('.mainPC').css({zIndex: 10})
  })
  $('#nextPage').on('click', function() {
    $(this).parent().addClass('.main_box').siblings().removeClass('.main_box');
    $('.mainPage6').css({zIndex: 10})
  })
  $('.mainPage6').on('click', function() {
    $(this).addClass('.main_box').siblings().removeClass('.main_box');
    $('.mainPage7').css({zIndex: 10})
  })
  $('.mainPage7').on('click', function() {
    $(this).addClass('.main_box').siblings().removeClass('.main_box');
    $('.mainPage8').css({zIndex: 10})
  })
  $('.mainPage8').on('click', function() {
    $(this).addClass('.main_box').siblings().removeClass('.main_box');
    $('.mainPage9').css({zIndex: 10})
  })
  $('.mainPage9').on('click', function() {
    $(this).addClass('.main_box').siblings().removeClass('.main_box');
    $('.mainPage10').css({zIndex: 10})
  })
  $('.mainPage10').on('click', function() {
    $(this).addClass('.main_box').siblings().removeClass('.main_box');
    $('.mainPage11').css({zIndex: 10})
  })





  $('.pop_box .close').on('click', function() {
    $('.pop_box').removeClass('pop_show').find('.popD').removeClass('show')
  })
  $('.product_wechat').on('click', function() {
    $('.pop_box').addClass('pop_show');
    $('.pop_box .pop_xcx').addClass('show').siblings().removeClass('show')
  })

  var swiper = new Swiper(".mySwiper", {
    direction: "vertical",
    autoplay: {
      delay: 5000,
      disableOnInteraction: false,
    },
    loop: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });
  var swiper = new Swiper(".zdSwiper", {
    autoplay: {
      delay: 13000,
      disableOnInteraction: false,
    },
    loop: true,
    pagination: {
      el: ".swiper-pagination",
      dynamicBullets: true,
    },
  });
  var swiper = new Swiper(".ldSwiper", {
    autoplay: {
      delay: 15000,
      disableOnInteraction: false,
    },
    loop: true,
    pagination: {
      el: ".swiper-pagination",
      dynamicBullets: true,
    },
  });
</script>

</body>
</html>